<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Dashboard">
    <meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">

    <title>用户登录</title>

    <!-- Bootstrap core CSS -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <!--external css-->
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
        
    <!-- Custom styles for this template -->
    <link href="assets/css/login.css" rel="stylesheet">
    <link href="assets/css/style-responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

      <!-- **********************************************************************************************************************************************************
      MAIN CONTENT
      *********************************************************************************************************************************************************** -->

	  <div id="login-page">
	  	<div class="container">
	  	
		      <form id="login-form" class="form-login">
		        <h2 class="form-login-heading">设备管理系统</h2>
		        <div class="login-wrap">
		            <input v-model="identifier" type="text" class="form-control" placeholder="用户名" autofocus>
		            <br>
		            <input v-model="credential" type="password" class="form-control" placeholder="密码">
		            <label class="checkbox">
		                <span class="pull-right">
		                    <a data-toggle="modal" href="login.html#myModal"> 忘记密码?</a>
		
		                </span>
		            </label>
		            <button v-on:click="login" class="btn btn-theme btn-block" type="button"> 登录</button>

		            
		            <!--<div class="login-social-link centered">-->
		            <!--<p>or you can sign in via your social network</p>-->
		                <!--<button class="btn btn-facebook" type="submit"><i class="fa fa-facebook"></i> Facebook</button>-->
		                <!--<button class="btn btn-twitter" type="submit"><i class="fa fa-twitter"></i> Twitter</button>-->
		            <!--</div>-->
		            <!--<div class="registration">-->
		                <!--Don't have an account yet?<br/>-->
		                <!--<a class="" href="#">-->
		                    <!--Create an account-->
		                <!--</a>-->
		            <!--</div>-->
		
		        </div>
		
		          <!-- Modal -->
		          <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
		              <div class="modal-dialog">
		                  <div class="modal-content">
		                      <div class="modal-header">
		                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                          <h4 class="modal-title">联系管理员</h4>
		                      </div>
		                      <div class="modal-body">
		                          <p>输入电子邮箱找回密码</p>
		                          <input type="text" name="email" placeholder="电子邮箱" autocomplete="off" class="form-control placeholder-no-fix">
		
		                      </div>
		                      <div class="modal-footer">
		                          <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
		                          <button class="btn btn-theme" type="button">Submit</button>
		                      </div>
		                  </div>
		              </div>
		          </div>
		          <!-- modal -->
		
		      </form>	  	
	  	
	  	</div>
	  </div>

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <!--BACKSTRETCH-->
    <!-- You can use an image of whatever size. This script will stretch to fit in any screen size.-->
    <script type="text/javascript" src="assets/js/jquery.backstretch.min.js"></script>
      <script src="assets/js/jquery.cookie.js"></script>
      <script src="assets/js/vue.js"></script>
      <script src="assets/js/module/common.js"></script>
    <script>
        $.backstretch("assets/img/login.jpg", {speed: 500});

        var loginVm = new Vue({
            el: "#login-form",
            data: {
                identifier: "",
                credential: "",
                identifyType: 0
            },
            methods: {
                login: function () {
                    $.ajax({
                        url: API.getApi(API.login),
                        method: "post",
                        contentType: "application/json",
                        data: JSON.stringify({
                            identifier: loginVm.identifier,
                            credential: loginVm.credential,
                            identifyType: loginVm.identifyType
                        }),
                        success: function (res) {
                            if (res.code == 0){
                                setLocalStorage(STORAGE_KEY.token, res.data.token);
                                setLocalStorage(STORAGE_KEY.userInfo, JSON.stringify(res.data.userInfo));
                                window.location.href = "index.html";
                            }else {
                                alert(res.msg);
                            }
                        },
                        error: function (res) {
                            alert("网络连接异常！");
                        }
                    })
                }
            }
        })
    </script>

  </body>
</html>
